Connecting an element by dropping it over another element

Disclaimer - The following tutorial was created with a past version of JointJS. The tutorial is still provided for those who may face a similar problem, but it may no longer show the best practices of JointJS. You may encounter the following issues:

• Use of outdated/deprecated API calls, or inheritance from superseded shape collections.
• Use of SVG string markup for custom Element/Link shape definitions; we have since started recommending using JSON markup instead.
• The Element and Link types defined may not serialize properly.
• Other unexpected problems.

Our current recommendations on best practices can be found in the appropriate sections of the basic and intermediate tutorials.

This quick tutorial shows how to automatically create links when the user drops an element over another element. Note that this is not necessary if you have elements with ports. For more details on elements with ports, see the Working with Ports tutorial.

Let's start with a demo and then let's have a look on how this can be done.

Try to drag an element and drop it over another element. You should see a new link has been created between the two elements.

The trick is to listen on the element:pointerup event on the paper and search for an element whose area contains the point of the mouse cursor. If such an element was found, we just create a link connecting both elements and move the dropped element to the position before dragging (we stored this information on the element:pointerdown event) to give the user a clue of what just happend.